<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/mootabs1.2.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/mootools-release-1.11.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mootabs1.2.js" type="text/javascript" charset="utf-8"></script>
<title>Test mooTabs</title>


<script type="text/javascript" charset="utf-8">

	window.addEvent('domready', init);
	function init() {
		myTabs1 = new mootabs('myTabs', {
   										width: '500px',
   										height: '250px',
   										changeTransition: Fx.Transitions.Back.easeOut,
   										duration: 1000,
   										mouseOverClass: 'over',
   										activateOnLoad: 'first',
   										useAjax: false,
   										ajaxLoadingText: 'Loading...'
   										});


   	}
   	
</script>
<script type="text/javascript" charset="utf-8">
	function buttonclick() {
		window.addEvent('domready', addTab);
	}
	function addTab() {
		myTabs = new mootabs('myTabs');
		myTabs.addTab('Tab4', 'Tab 4 Label', 'Content of tab4');
		myTabs.activate('Tab4');
		myTabs1.removeTab('Tab2');
	}
</script>


</head>
<body>

<div id="myTabs">
	<ul class="mootabs_title">
		<li title="Tab1">Tab 1 Label</li>
		<li title="Tab2">Tab 2 Label</li>
		<li title="Tab3">Tab 3 Label</li>
		<li title="Tab5">Tab 5 Label</li>
	</ul>
	<div id="Tab1" class="mootabs_panel">
		Tab 1 Content
	</div>
 	<div id="Tab2" class="mootabs_panel">
 		Tab 2 Content
	</div>
 	<div id="Tab3" class="mootabs_panel">
		Tab 3 Content
	</div>
	<div id="Tab5" class="mootabs_panel">
		Tab 5 Content
	</div>
</div>

<input type="button" name="addTab" onclick="buttonclick();"/>

</body>
</html>